<template>
  <div ref="allLine" id="allLine" style="width: 100%; height: 100%;pointer-events: auto"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as echarts from "echarts";
import { debounce } from "./mixins/debounce";
export default defineComponent({
  setup(props: any) {
    // echart节点
    const charts = ref<HTMLElement | null>(null);

    onMounted(() => {
      // 获取节点
      const myChart = echarts.init(
        document.getElementById("allLine") as HTMLElement
      );
      const option = {
        tooltip: {},
        legend: {
          top: "0%",
          data: ["前端", "后端"],
          textStyle: {
            color: "#01D4F9",
            fontSize: "12",
          },
        },
        grid: {
          left: "20",
          top: "30",
          right: "20",
          bottom: "20",
          containLabel: true,
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            splitLine: {
              //分割线配置
              show: false,
              lineStyle: {
                color: "#196AFF",
                type: "dotted",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#01D4F9",
                fontSize: "10",
                type: "solid",
              },
            },

            data: [
              "01",
              "02",
              "03",
              "04",
              "05",
              "06",
              "07",
              "08",
              "09",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
            ],
          },
          {
            axisPointer: { show: false },
            axisLine: { show: false },
            position: "bottom",
            offset: 20,
          },
        ],

        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLabel: {
              color: "#01D4F9",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#01D4F9"],
                width: 1,
                type: "dotted",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#D9DADA",
              },
            },
          },
        ],
        series: [
          {
            name: "前端",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#0184d5",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            itemStyle: {
              normal: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
              },
            },
            data: [
              3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4,
              2, 4,
            ],
          },
          {
            name: "后端",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            itemStyle: {
              normal: {
                color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
              },
            },
            data: [
              5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5,
              1, 4,
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener(
        "resize",
        debounce(() => {
          myChart.resize();
        })
      );
    });
    return {
      charts,
    };
  },
});
</script>
